<template>
    <div id="mainContent">
        <!-- 权限基础数据 -->
        <el-card class="box-card" style="margin-right:15px;">
            <el-row>
                <el-col :span="1" :offset="23" style="text-align: right;">
                    <jt-table-column-filter :table-key.sync="tableKey" :header-data.sync="tableHeaderArr" :filter-column.sync="filterColumnData"></jt-table-column-filter>
                </el-col>
            </el-row>

            <el-table :data="tableData" :key='tableKey' v-loading="loading" border stripe height="460">
                <el-table-column type="index" width="50" label="序号" align="center" :resizable="false"></el-table-column>
                <el-table-column align="center" :key='item' v-for='item in filterColumnData' :resizable="false" 
                    :prop="item" 
                    :label="getTableHeaderLabel(item)" 
                    :sortable="getTableColumnSort(item)">
                    <template slot-scope="scope">
                        {{scope.row[item]}}
                    </template>
                </el-table-column>
            </el-table>

            <el-row type="flex" justify="center">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizeArr"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"></el-pagination>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    import JtTableColumnFilter from 'components/jt-table-column-filter/index';    // 导入表格列筛选组件
    import { permissionService } from 'service/system-manage/permission-data'
    export default {
        name: 'PermissionData',
        components: {
            'jt-table-column-filter': JtTableColumnFilter
        },
        data(){
            return {
                tableData: [],
                loading: false,
                tableKey: 1,
                filterColumnData: [],
                tableHeaderArr: [],
                tableColumnWidth: [160, 210],   //表格列宽度
                pageSizeArr: [10, 20, 50],
                pageSize: 10,
                pageTotal: 20,
                currentPage: 1
            }
        },
        mounted() {
            this.showList();
        },
        methods: {
            handleSizeChange(val){
                this.pageSize = val;
                this.showList();
            },
            handleCurrentChange(val){
                this.currentPage = val;
                this.showList();
            },
            // 表头展示
            getTableHeaderLabel(str) {
                return this.getTableSomeValue(str, 'alias');
            },
            // 获取表格列的宽度
            getTableColumnWidth(){
                for (let value of this.tableColumnWidth) {
                    return value;
                }
            },
            // 获取表格列是否排序
            getTableColumnSort(str){
                return this.getTableSomeValue(str, 'sort');
            },
            // 获取表格表头，列宽度，列固定，列排序的值
            getTableSomeValue(str, keyName){
                for (var value of this.tableHeaderArr) {
                    if (value['name'] == str) {
                        return value[keyName];
                    }
                }
            },
            // 获取数据，初始化，分页，查询
            showList() {
                this.loading = true;
                permissionService(this.currentPage, this.pageSize)
                    .then((res) => {
                        this.tableHeaderArr = res.data.tableHeaderArr;
                        this.tableData = res.data.pd.page.list;
                        this.pageTotal = res.data.pd.page.total;
                        this.loading = false;
                    });
            }
        }
    }
</script>